<template>
    <div class="landRank">
        <zlc-nodata v-if="!files || !files.length"></zlc-nodata>
        <swiper v-else :navigation="true" :modules="modules" class="mySwiper" :autoplay="{
          delay: 2000,
          disableOnInteraction: false,
        }">
            <swiper-slide v-for="(item, index) in files" :key="index">
                <img :src="staticUrl+item" alt="" class="item" v-viewer v-lazy="item">
            </swiper-slide>
        </swiper>

    </div>

</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation, Autoplay } from 'swiper/modules';
import {computed, toRefs} from "vue";
import zlcNodata from "../../../components/zlcNodata/zlcNodata.vue";

export default {
    props:{
        datas:{
            type: String,
            default(){
                return ""
            }
        }
    },
    components: {
        zlcNodata,
        Swiper,
        SwiperSlide,
    },
    setup(props, context) {

        let staticUrl =  import.meta.env.VITE_APP_API_BASE_URL

        let refProps = toRefs(props)
        let files = computed(() => {
            return refProps.datas.value ? refProps.datas.value.split(',') : []
        })
        return {
            staticUrl,
            modules: [Navigation, Autoplay],
            refProps,
            files
        };
    },
};
</script>

<style lang="less" scoped>
.landRank{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    &:deep(.swiper){
        width: 100%;
        height: 100%;
        position: relative;
        .item{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .swiper-button-prev, .swiper-button-next{
            width: 10px;
            height: 30px;
            position: absolute;
            top: 50%;
            margin-top: -15px;
            &::after{
                width: 100%;
                height: 100%;
                font-size: 30px;
            }
        }
    }
}


</style>
